文件上传

✂️

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    function fileSelected() {var file =
    document.getElementById('fileToUpload').files[0];if (file) {var fileSize =
    0;if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 /
    (1024 * 1024)) / 100).toString() + 'MB';elsefileSize = (Math.round(file.size
    * 100 / 1024) / 100).toString() +
    'KB';document.getElementById('fileName').innerHTML = ' 文件名 : ' +
    file.name; document.getElementById('fileSize').innerHTML = ' 大 小 : ' +
    fileSize;document.getElementById('fileType').innerHTML = ' 类 型 : ' +
    file.type;}} function uploadFile() {var fd = new
    FormData();fd.append("fileToUpload",
    document.getElementById('fileToUpload').files[0]);var xhr = new
    XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
    false);xhr.addEventListener("load", uploadComplete,
    false);xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);xhr.open("POST",
    "test.php");xhr.send(fd);}function uploadProgress(evt) { if
    (evt.lengthComputable) {var percentComplete = Math.round(evt.loaded * 100 /
    evt.total);document.getElementById('progressNumber').innerHTML =
    percentComplete.toString() + '%'; } else
    {document.getElementById('progressNumber').innerHTML = 'unable to
    compute';}}function uploadComplete(evt) { var info =
    document.getElementById('info');/* 当服务器发送响应时，会引发此事件
    */info.innerHTML = evt.target.responseText;} function uploadFailed(evt)
    {alert(" 试图上载文件时出现一个错误 ");}function uploadCanceled(evt)
    {alert(" 上传已被用户取消或浏览器放弃连接 "); }
  </head>
  <body>
    <form
      id="form1"
      enctype="multipart/form-data"
      method="post"
      action="upload.php"
    >
      <div class="row">
        <label for="fileToUpload"> 选择上传文件 </label
        ><input
          type="file"
          name="fileToUpload"
          id="fileToUpload"
          onchange="fileSelected();"
        />
      </div>
      <div id="fileName"></div>
      <div id="fileSize"></div>
      <div id="fileType"></div>
      <div class="row">
        <input type="button" onclick="uploadFile()" value=" 上传 " />
      </div>
      <div id="progressNumber"></div>
      <div id="info"></div>
    </form>
  </body>
</html>

后台 php 文件：

✂️

php

<?php header('content=text/html;charset=utf-8'); $uf = $_FILES('fileToUpload');
    if($uf){ echo " 没有 fileToUpload 引用 "; exit(); }
$upload_file_temp = $uf['tem_name']; $upload_file_name = $uf['name'];
    $upload_file_size=$uf['size'];if(!$upload_file_temp){
  echo ' 上传失败 '; exit(); } $file_size_max = 1024*1024*100;//
      100M 限制文件上传最大容量（ bytes ） if($upload_file_size>$file_size_max){ //
      检查文件 echo 'sorry ， you file size is too
    large and the server refuses to receive it !!!'.$file_size_max; exit(); } $store_dir='./upload';// 服务器储存位置 ;
    $accept_overwrite =0; $accept_path = $store_dir . $upload_file_name; if(file_exists($file_path) &&
!$accept_overwrite){
  echo ' 存在相同文件名文件 ';
  exit(); } if(!move_uploaded_file($upload_file_temp,$file_path)){ echo
    ' 复制文件失败 '.$upload_file_temp.'to'.$file_path; exit(); } Echo
    '<p> 你上传了文件： '.$upload_file_name.' 文件的 MIME 类型 '.$uf['type'];
    echo' 上传文件大小： '.$uf['size']; Echo ' 文件被临时储存为： '.$uf['tmp_name']; echo '';
    $error = $uf['error']; switch($error){
case 0: Echo ' 上传成功 ';break; case 1: Echo
' 上传文件太大 ';break; case 2: Echo ' 上传大小超过 HTML 表单最大值 ';break; case
3 : Echo ' 只有部分文件被上传 ';break;
case 4: Echo ' 没有文件被上传 ';break; } ?>